<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 

        1. 开发组件时，参数可以做一些限制，比如说，是否必须传递、string、number...


        props: []
        props: {
            key: value
                key - 属性名 prop
                value Number|String|...
        }

     -->
    <div id="app">
      <!-- 传递参数 name age -->
      <person name="张三" :age="10"></person>

      <person name="里斯" prop-f="success"></person>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      Vue.config.productionTip = false;

      Vue.component("person", {
        // props 接收传递过来的 参数
        // props: ["name", "age"],

        props: {
          name: {
            type: String, // 字符串
            required: true, // 必须传递
          },
          age: {
            type: Number, // 数字类型
            default: 18, // 默认值
          },
          // 自定义验证函数
          propF: {
            validator: function (value) {
              console.log(value, "====");
              // 会接收一个 value ,value 你传递过来的值
              // 必须要有返回值，返回 true => 校验通过
              //                     false => 校验失败，不能使用
              // 这个值必须匹配下列字符串中的一个
              return ["success", "warning", "danger"].includes(value);

              // 1. 必须是一个身份证号码
            },
          },
        },

        data: function () {
          return {
            width: "180",
            height: "180",
          };
        },

        template: `
            <div>
              <h2>姓名：{{ name }}</h2>
              <h2>年龄：{{ age }} - {{ typeof age }}</h2>
            </div>
        `,
      });

      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
